<template>
  <div>
    
    <!-- 头部导航栏 -->
    <div class="sh-nav-line">
      <div class="sh-nav-left" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <div class="sh-nav-title">城市列表</div>
      <div class="sh-nav-right"></div>
    </div>
    <!-- 文本框 -->
    <div>
      <van-index-bar :index-list="indexList">
        <van-index-anchor index="#">当前城市</van-index-anchor>
        <!-- <van-cell :title="$store.state.city.currentCity" @click="fn" /> -->
        <!-- <van-cell :title="item.label" /> -->

        <van-index-anchor index="热">热门城市</van-index-anchor>
        <van-cell :title="item.label" v-for="item in remenCtiy" :key="item.id" />
        <van-cell
          :title="item.label"
          v-for="item in areaAist"
          :key="item.id"
        />
        <div v-for="(item, index) in qyq" :key="index">
          <van-index-anchor :index="item">{{ item }}</van-index-anchor>
          <van-cell
            :title="item.label"
            v-for="(item, index) in Flitenr(item)"
            :key="index"
          />

          <!-- <van-cell title="文本" />
          <van-cell title="文本" />-->
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { cityList, areaList } from '@/api/user'

export default {
  name: 'LessonShanghai',

  data() {
    return {
      shangList: [],
      remenCtiy: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z',
      ],
      //http://liufusong.top:8080/area/city?level=1
    }
  },

  mounted() {},
  created() {
    this.cityAist()
    this.areaAist()
    this.Flitenr()
  },
  computed: {
    qyq() {
      return this.indexList.filter((val) => val != '#' && val != '热')
    },
  },
  methods: {
    async cityAist() {
      try {
        const { body } = await cityList()
        // console.log('res', body);
        this.shangList = body
        console.log(this.shangList)
      } catch (err) {
        console.log(err)
      }
    },
    async areaAist() {
      try {
        const { body } = await areaList()
        // console.log('res', body);
        console.log('res', body)
        this.remenCtiy = body
      } catch (err) {
        console.log(err)
      }
    },
    Flitenr(val){
     return this.shangList.filter(ele=>ele.short[0].toUpperCase()===val)
    
    }
  },
}
</script>

<style lang="less" scoped>
.sh-nav-line {
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background-color: #21b97a;
  .sh-nav-title {
    padding-top: 5px;
    color: #e9e7e7;
    text-align: center;
  }
  .sh-nav-right {
    height: 45px;
    width: 20px;
  }
  .sh-nav-left {
    padding-top: 10px;
    height: 45px;
    width: 30px;
  }
}
</style>
